<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: url("BB1msIAy.jpg");
      background-size: cover; /* Ensure the image covers the entire screen */
    }
    .login-container {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 250px;
    }
    .login-container h2 {
      margin-top: 0;
      margin-bottom: 20px;
      text-align: center;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      text-align: left; /* Align labels to the center */
    }
    .form-group input {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: center; /* Center the input text */
    }
    .form-group button {
      width: 100%;
      padding: 10px;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      font-size: 16px;
      margin-top: auto; /* Push the button to the bottom */
    }
    .form-group button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
  <div class="form-group">
    <label for="username">username</label>
<input type="text" id="username" placeholder="用户名">
  </div>
  <div class="form-group">
    <label for="username">password</label>
<input type="password" id="password" placeholder="密码">
  </div>
  <div class="form-group">
<button onclick="login()">Login</button>
  </div>
</div>

<script>
  async function login() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    try {
      const response = await fetch('http://101.200.235.124:8080/shopNest/users/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
      });

      const data = await response.json();

      if (data.code === 0) { // 假设R.ok()的code为0
        alert('YES - Success！');
        // 登录成功后可以保存token
        localStorage.setItem('token', data.token);
      } else {
        alert('NO - Failed: ' + data.msg);
      }
    } catch (error) {
      alert('NO - Request failed: ' + error.message);
    }
  }
</script>
</body>
</html>